<template>
  <div
    class="search-box"
    :style="{ right: store.isShowPeople ? '480px' : '400px' }"
  >
    <el-input v-model="searchValue" placeholder="请输入" clearable />
    <ul class="result-search" v-show="!!resultList.length">
      <li v-for="(item, index) in resultList" :key="index">
        <span>{{ item["户主"] }}</span>
        <p>{{ item["现居住地"] }}</p>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import hsjfPeopleList from "@/assets/json/hsjf_people.json";
import jsPeopleList from "@/assets/json/jf_people.json";
import mhdPeopleList from "@/assets/json/mhd_people.json";
import sjmyPeopleList from "@/assets/json/sjmy_people.json";
import tyxqPeopleList from "@/assets/json/tyxq_people.json";
import ycxqPeopleList from "@/assets/json/ycxq_people.json";
import { overviewStore } from "@/stores/overview";

const store = overviewStore();

const searchValue = ref("");
const resultList: any = ref([]);

const peopleList: any = [].concat(
  [],
  hsjfPeopleList,
  jsPeopleList,
  mhdPeopleList,
  sjmyPeopleList,
  tyxqPeopleList,
  ycxqPeopleList
);

watch(searchValue, (val: string) => {
  if (val === "") {
    resultList.value = [];
    return;
  }

  const list = peopleList.filter(
    (item: any) =>
      (item["户主"] && item["户主"].indexOf(val) >= 0) ||
      (item["现居住地"] && item["现居住地"].indexOf(val) >= 0)
  );

  resultList.value = list;
});
</script>

<style lang="scss" scoped>
.search-box {
  position: absolute;
  right: 400px;
  top: 80px;
  width: 300px;
  height: 40px;
}
.result-search {
  box-sizing: border-box;
  padding: 15px 0;
  max-height: 400px;
  overflow-y: auto;
  background: linear-gradient(to right, rgba(37, 54, 54, 0.7) 0%, rgba(37, 54, 54, 0.5) 100%);
  border-radius: 0 0 10px 10px;
  li {
    display: flex;
    flex-direction: column;
    font-size: 14px;
    color: #ffffff;
    box-sizing: border-box;
    padding: 10px 20px;
    border-bottom: 1px solid #ccc;
    cursor: pointer;
    span {
      margin-bottom: 10px;
    }
  }
}
</style>
